<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
			div {
				background: rgba(127,127 , 127, 0.8);
				/* 半透明 */

			}
			div p:first-child{
				/* 上边白，里边黑 */
				font-size: 80px;
				font-family: SimHei;
				color: gray;
				text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;

			}
			div p:last-child{
				/* 上边黑里边白 */
				font-size: 80px;
				color: gray;
				text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;

			}
			.h {
				/* width: 300px; */
				height: 300px;
				background-color: pink;
				/* float: left; */
			}
			.hh {
				/* width: 100px; */
				height: 100px;
				background-color: red;
				/* float: left; */
			}
			.y {
				width: 300px;
				height: 200px;
				background-color: blue;
			}
        </style>
    </head>
    <body>
    <div>
    <p>我是凸起的文字哦</p>
    <p>我是凹下的文字呢</p>
    </div>
    <div class="h">
    	<div class="hh"></div>
    </div>
    <div class="y"></div>
    </body>
</html>